<template>
    <scroll-view scroll-y @scroll="handleScroll" @scrolltolower="handleScrollToLower" style="height: 100vh;">
        <view class="layout">
            <!-- 导航部分 -->
            <view class="navbar" :style="{ backgroundColor: scrollTop >= 50 ? 'white' : 'transparent' }">
                <view class="statusBar" :style="{ height: getStatusBarHeight() + 'px' }"></view>
                <view class="titleBar" :style="{ height: getTitleBarHeight() + 'px', marginLeft: getLeftIconLeft() + 'px' }">
                    <view class="box">
                        <uni-icons type="left" size="30" @click="goBack"></uni-icons>
                        <view class="time">
                            <text v-if="readTime == null">今日未阅读</text>
                            <text v-else>{{ readTime }}小时</text>
                        </view>
                        <view class="icon">
                            <uni-icons type="pyq" size="30" @click="goCommunity"></uni-icons>
                            <uni-icons type="search" size="30" style="padding: 0 20rpx;" @click="goSearch"></uni-icons>
                            <uni-icons type="settings-filled" size="30"></uni-icons>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 填充区域->为了让固定的搜索框不遮盖内容 -->
            <view class="fill" :style="{ height: getNavBarHeight() + 60 + 'px' }"></view>
            <!-- 中间 -->
            <view class="book-wrap">
                <view class="title">
                    最近阅读
                </view>
                <image :src="newRecord?.novel?.image" mode="aspectFill" v-if="newRecord != null"></image>
                <view class="content" v-if="newRecord != null" @click="goRead(newRecord.novel.novelId)">
                    <view class="booktitle">{{ newRecord.novel.novelName }}</view>
                    <view class="bookcontent" v-if="!newRecord.chapter.chapterIndex">未读</view>
                    <view class="bookcontent" v-else>
                        上次阅读至第 {{ newRecord.chapter.chapterIndex }} 章
                    </view>
                    <view class="bookfoot" @click="goReading(newRecord.novel.noverId)">
                        继续阅读 >
                    </view>
                </view>
                <view class="isNoread" v-show="newRecord == null">
                    <text>暂无阅读记录</text>
                </view>
                <view class="foot" @click="goHistory">
                    <view class="img">
                        <image src="../../static/novel/history.png"></image>
                    </view>
                    <view class="text">
                        <text>浏览历史</text>
                    </view>
                </view>
            </view>
            
            <!-- 书架部分 -->
            <view class="books" v-if="novels.length != 0">
                <view class="list-book" v-for="(item, index) in novels" :key="index">
                    <!-- 左边 -->
                    <view class="left" @click="goRead(item.novel.novelId)">
                        <image :src="item.novel.image" mode="widthFix"></image>
                    </view>
                    <!-- 中间 -->
                    <view class="center">
                        <!-- 头部 -->
                        <view class="name">
                            <view class="title">
                                <text>{{ item.novel.novelName }}</text>
                            </view>
                            <view class="reads">
                                <uni-icons type="more-filled" size="30" @click="onPopus(item)"></uni-icons>
                            </view>
                        </view>
                        <!-- 中间 -->
                        <view class="pages" @click="goRead(item.novel.novelId)">
                            <text v-if="item.novel.status === 0">连载至: 第 {{ item.novel.chapterNum }} 章{{item.chapter.title}} </text>
                            <text v-else-if="item.novel.status === 1">最后一章: {{ item.novel.chapterNum  }} 章 {{item.chapter.title}}</text>
                            <text v-else>断更至: 第 {{ item.novel.chapterNum  }} 章 {{item.chapter.title}}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="noBook" v-else>
                <image src="/static/novel/noBook.gif" mode="widthFix"></image>
                <text>书架暂无书籍</text>
            </view>
        </view>
        
        <!-- 中间弹出层 -->
        <uni-popup ref="selectPopup" type="center" :animation="false">
            <view class="center-popu">
                <view class="popu-center">
                    <view class="c-box">
                        <image src="/static/novel/up.png" @click="ups"></image>
                        <text>置顶</text>
                    </view>
                    <view class="c-box" @click="show">
                        <image src="/static/novel/share.png"></image>
                        <text>分享</text>
                    </view>
                    <view class="c-box" @click="deleteBook">
                        <image src="/static/novel/del.png"></image>
                        <text>删除</text>
                    </view>
                </view>
            </view>
        </uni-popup>
    </scroll-view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight, getLeftIconLeft } from "@/utils/system.js";
import { APigetBookSelf, ApigetnewRecord, ApiDeleteNovelSelf } from "../api/novel.js";
import { useInfoStore } from "../../store/user.js";

const pageNum = ref(1);
const size = ref(20);
const hasMore = ref(true);
const isFetching = ref(false);
const user = useInfoStore();
const userInfo = ref(null);
const novels = ref([]);
const newRecord = ref(null);
const readTime = ref(0); 
const scrollTop = ref(0);
const selectPopup = ref(null);
const currentBook = ref(null);

const getBook = async () => {
    let res = await APigetBookSelf(pageNum.value, size.value);
    novels.value = res;
};

const getNewbook = async () => {
    let res = await ApigetnewRecord();
    newRecord.value = res;
};

const getTime = () => {
    userInfo.value = user.userInfo;
    const timeInMinutes = userInfo.value.readTime;
    readTime.value = (timeInMinutes / 60).toFixed(2);
};

onMounted(() => {
    getBook();
    getNewbook();
    getTime();
});

const handleScroll = (e) => {
    scrollTop.value = e.detail.scrollTop;
};

const goRead = (val) => {
    uni.navigateTo({
        url: `/pages/novel/bookCover?bookId=${val}`
    });
};

const deleteBook =  async() => {
    const index = novels.value.findIndex(book => book.novel.noverId === currentBook.value.novel.noverId);
    if (index > -1) {
        novels.value.splice(index, 1);
    }
    selectPopup.value.close();
	await ApiDeleteNovelSelf(currentBook.value.novel.noverId)
};

const goCommunity = () => uni.navigateTo({ url: "/pages/bookCity/club" });
const goSearch = () => uni.navigateTo({ url: "/pages/novel/search" });
const goHistory = () => uni.navigateTo({ url: "/pages/novel/history" });
const goBack = () => uni.navigateBack();

const onPopus = (item) => {
    selectPopup.value.open();
    currentBook.value = item;
};

const show = () => {
    uni.showModal({ title: "亲暂未实现该功能" });
    selectPopup.value.close();
};

const ups = () => {
    if (currentBook.value) {
        const index = novels.value.findIndex(book => book === currentBook.value);
        if (index > 0) {
            const bookToTop = novels.value.splice(index, 1)[0];
            novels.value.unshift(bookToTop);
        } else {
            uni.showToast({ title: "已经在顶部", icon: 'none' });
        }
        selectPopup.value.close();
    }
};

const handleScrollToLower = () => { 
    pageNum.value += 1;
    getBook();
};
</script>

<style lang="scss" scoped>
/* 隐藏滚动条（新增浏览器全兼容方案） */
scroll-view {
  /* 隐藏Webkit内核滚动条（Chrome/Edge/Safari） */
  ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
  }
  /* 隐藏Firefox滚动条 */
  scrollbar-width: none;
  /* 隐藏IE/Edge滚动条 */
  -ms-overflow-style: none;
}

/* 原有样式（保留其他样式） */
::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
}

/* 隐藏滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: transparent;
}

/* 隐藏滚动条滑块 */
::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.layout {
    /* 填充区域样式 */
    .fill {
        background: url(/static/novel/bj.jpg) center;
        background-size: cover; /* 让背景图片覆盖整个区域 */
    }

    /* 导航栏样式 */
    .navbar {
        z-index: 1000;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        transition: background-color 0.3s ease;

        /* 状态栏样式 */
        .statusBar {
            background-color: transparent;
        }

        /* 标题栏样式 */
        .titleBar {
            z-index: 10;
            background: transparent;
            display: flex;
            align-items: center;
            padding: 0 30rpx;

            /* 标题栏内盒子样式 */
            .box {
                display: flex;
                align-items: center;
                justify-content: space-between;

                /* 阅读时间显示区域样式 */
                .time {
                    width: 400rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #000;
                    font-size: 20px;
                    font-weight: 600;
                }

                /* 图标区域样式 */
                .icon {
                    display: flex;
                    align-items: center;
                    gap: 20rpx;
                }
            }
        }
    }

    /* 最近阅读区域样式 */
    .book-wrap {
        margin-bottom: 15px;
        border-radius: 16rpx;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        position: absolute;
        display: flex;
        overflow: hidden;
        height: auto;
        margin-top: -15px;
        left: 30rpx;
        right: 30rpx;

        /* 标题样式 */
        .title {
            text-align: center;
            writing-mode: vertical-lr;
            padding: 46rpx 10rpx;
            font-size: 23rpx;
            color: #2b85e4;
            font-weight: bold;
            background-color: #E3F1FC;
        }

        /* 图片样式 */
        image {
            padding: 25rpx;
            width: 100rpx;
            height: 140rpx;
            object-fit: cover; /* 让图片按比例覆盖容器 */
        }

        /* 内容区域样式 */
        .content {
            display: flex;
            flex-direction: column;
            width: 300rpx;
            padding: 25rpx 25rpx 0 0;

            /* 书籍标题样式 */
            .booktitle {
                font-size: 28rpx;
                line-height: 40rpx;
                font-weight: 600;
            }

            /* 书籍阅读状态样式 */
            .bookcontent {
                font-size: 25rpx;
                color: #666;
            }

            /* 继续阅读按钮样式 */
            .bookfoot {
                margin-top: 10rpx;
                font-size: 25rpx;
                color: #2b85e4;
                cursor: pointer; /* 鼠标指针样式 */
            }
        }

        /* 浏览历史区域样式 */
        .foot {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            /* 图片样式 */
            .img {
                image {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 80rpx;
                    height: 80rpx;
                }
            }

            /* 文字样式 */
            .text {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 15px;
                font-weight: 600;
                color: #333;
            }
        }
    }
}

/* 书架区域样式 */
.books {
    margin-top: 100px;
    margin-bottom: 50rpx;
    padding: 0 20rpx; /* 新增：左右内边距，控制书籍元素与边框距离 */

    /* 每本书籍项样式 */
    .list-book {
        margin-bottom: 30rpx;
        padding: 20rpx;
        border-radius: 10rpx;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;

        /* 书籍封面区域样式 */
        .left {
            image {
                width: 130rpx;
                border-radius: 10rpx;
                object-fit: cover;
            }
        }

        /* 书籍详情区域样式 */
        .center {
            margin-left: 20rpx;

            /* 书籍名称和更多操作区域样式 */
            .name {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 10rpx; /* 减小间距 */

                /* 书籍名称样式 */
                .title {
                    width: 170px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 18px; /* 减小字体大小 */
                    font-weight: 600;
                }

                /* 更多操作图标样式 */
                .reads {
                    cursor: pointer;
                }
            }

            /* 书籍章节信息样式 */
            .pages {
                width: 250px;
                margin: 10rpx 0; /* 减小间距 */
                color: #999;
                font-size: 13px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* 书籍阅读状态样式 */
            .status {
                color: #999;
                font-size: 13px;
                margin-top: 5rpx; /* 减小间距 */
            }
        }
    }
}

/* 中间弹出层样式 */
.center-popu {
    display: flex;
    background-color: #fff;
    border-radius: 10px;
    width: 80vw;
    height: 10vh;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    z-index: 9999;

    /* 弹出层内按钮区域样式 */
    .popu-center {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;

        /* 每个按钮样式 */
        .c-box {
            display: flex;
            align-items: center;
            flex-direction: column;
            cursor: pointer;

            /* 按钮图片样式 */
            image {
                width: 60rpx;
                height: 60rpx;
            }

            /* 按钮文字样式 */
            text {
                margin-top: 10rpx;
                font-size: 16px;
                color: #333;
            }
        }
    }
}

/* 书架无书籍提示区域样式 */
.noBook {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 150px;

    /* 图片样式 */
    image {
        width: 300rpx;
        border-radius: 50%;
        object-fit: cover;
    }

    /* 文字样式 */
    text {
        padding-top: 10rpx;
        font-size: 20px;
        color: #999;
    }
}

/* 暂无阅读记录 */
.isNoread {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 150rpx;
    background-color: #f8f8f8;
    margin: 20rpx 30rpx;
    text-align: center;
    color: #999;
    font-size: 16px;
    font-weight: 500;
}
</style>